<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script type="text/javascript" src="layui/layui.js"></script>
</head>
<body>
	<form class="layui-form" action="">
		<div class="layui-form-item">
			<label class="layui-form-label">名字</label>
			<div class="layui-input-inline">
				<input type="text" id="UserName" lay-verify="title"
					autocomplete="off" placeholder="请输入名字" class="layui-input">
			</div>
			<label class="layui-form-label">签到时间</label>
			<div class="layui-input-inline" style="width: 100px;">
				<input type="text" id="beginTime" placeholder="yyyy-MM-dd"
					autocomplete="off" class="layui-input">
			</div>
			<div class="layui-form-mid">-</div>
			<div class="layui-input-inline" style="width: 100px;">
				<input type="text" id="endTime" placeholder="yyyy-MM-dd"
					autocomplete="off" class="layui-input">
			</div>
			<label class="layui-form-label">签到状态</label>
			<div class="layui-input-inline">
				<select id="CheckState" lay-filter="aihao">
					<option value=""></option>
					<option value="已签到">已签到</option>
					<option value="已签退">已签退</option>
				</select>
			</div>
			<div class="layui-input-inline">
				<button type="submit" class="layui-btn" lay-submit=""
					lay-filter="ss">立即搜索</button>
			</div>
		</div>
	</form>
	<table id="demo" lay-filter="test"></table>
	
	<script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="qianTui">签退</a>
	</script>
	<script>
		layui.use(['table','form','layer','laydate'], function(){
		  var table = layui.table;
		  var form = layui.form;
		  var layer = layui.layer;
		  var laydate = layui.laydate;
		  var $ = layui.$;
		  
		    //执行一个laydate实例
			  laydate.render({
			    elem: '#beginTime' //指定元素
			  });
			    //执行一个laydate实例
			  laydate.render({
			    elem: '#endTime' //指定元素
			  });
		  //第一个实例
		  table.render({
		    elem: '#demo'
		    ,url: 'getAskers' //数据接口
		    ,id:'askTab'
		    ,page: true //开启分页
		    ,cols: [[ //表头  
		      {field: 'Id', title: 'id'}
		      ,{field: 'UserName', title: '咨询师名称'}
		      ,{field: 'CheckState', title: '签到状态'}
		      ,{field: 'CheckInTime', title: '签到时间'} 
		      ,{field: 'IsCancel', title: '是否取消签到'}
		      ,{field: 'CheckOutTime', title: '取消签到时间'}
		      
		      ,{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
		    ]]
		  });
		  form.on('submit(ss)', function(data){
			 	table.reload('askTab', {
				  where: { //设定异步数据接口的额外参数，任意设
				   	UserName:$("#UserName").val()
				   ,beginTime:$("#beginTime").val()
				   ,endTime:$("#endTime").val()
				   ,CheckState:$("#CheckState").val()
				  }
				  ,page: {
				    curr: 1 //重新从第 1 页开始
				  }
				});
			 
			  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});
			//工具条事件
			table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
			  var data = obj.data; //获得当前行数据
			  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			  var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
			 
			  if(layEvent === 'qianTui'){ //查看
			    	$.post("xgCheckState",{
				    	Id:data.Id,
				    	IsCancel:'是',
				    	CheckInTime:data.CheckInTime,
				    	CheckState:'已签退'
			    	},function(res){
			    		if(res.code=="0"){
			    			table.reload('askTab');
			    			layer.msg(res.msg);
			    		}else{
			    			layer.msg(res.msg);
			    		}
			    	},"json");
			    }
			});
		});
	</script>
</body>
</html>